 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width1">银行列表</div>
      </div>
      <div class="content-con">
        <div class="bank-search">
          <div class="search-item">
            <i-input style="width: 28%" :value.sync="value" placeholder="银行名称"></i-input>
            <i-input style="width: 28%" :value.sync="value" placeholder="开户名"></i-input>
            <i-input style="width: 28%" :value.sync="value" placeholder="银行卡号"></i-input>
            <i-button class="btn-green">搜索</i-button>
          </div>
        </div>
        <div class="bank-add">
          <i-button class="btn-green">新增</i-button>
        </div>
        <div class="bank-form">
          <div class="form-item">
            <i-table :columns="foodColumns" :data="foodData"></i-table> <!-- table组件 -->
          </div>
          <div class="page">
            <div style="float: left;">
              <Page :total="dataCount" :page-size="pageSize" @on-change="changepage" @on-page-size-change="nowPageSize" show-total show-sizer show-elevator></Page> <!-- page组件 -->
            </div>
          </div>
        </div>
      </div>
   </Card>

 </template>
<script>

let testData = {
  histories: [
    {
      number: '557',
      bankName: 'g',
      accountName: 'h',
      bankNumber: 'hf',
      balance: '0.0',
      operator: '人工003',
      status: '启用'
      // operate: "编辑",
    },
    {
      number: '556',
      bankName: '浦发银行',
      accountName: '11',
      bankNumber: '6226',
      balance: '30000.0',
      operator: '测试001',
      status: '启用'
      // operate: "编辑",
    },
    {
      number: '555',
      bankName: '测试1',
      accountName: '测试',
      bankNumber: '1234567',
      balance: '10000.0',
      operator: '人工003',
      status: '启用'
      // operate: "编辑",
    }
  ]
}
export default {
  name: 'bankCardList',
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      value: '',
      ajaxHistoryData: [],
      exportdata: [],
      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      pageSize: 10,
      pageCurrent: 1, // 当前页
      foodColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '编号',
          key: 'number'
        },
        {
          title: '银行名称',
          key: 'bankName'
        },
        {
          title: '开户名称',
          key: 'accountName'
        },
        {
          title: '银行卡号',
          key: 'bankNumber'
        },
        {
          title: '余额',
          key: 'balance'
        },
        {
          title: '操作人',
          key: 'operator'
        },
        {
          title: '状态',
          key: 'status'
        },
        {
          title: '操作',
          key: 'action',
          width: 80,
          align: 'center',
          // render (row, column, index) {
          //     return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button>`;
          // }
          render: (h, params) => {
            return h('div', [
			  h(
                'Button', {
				  props: {
                    size: 'small'
				  },
				  style: {
                    color: 'white',
                    padding: '0 5px',
                    height: '24px',
                    fontSize: '12px',
                    backgroundColor: '#009688'
				  },
				  on: {
                    click: () => {
					  this.$router.push({
                        name: 'ban-edit'
					  })
					  // this.show(params.index)
					  // e.stopPropagation(); //阻止冒泡
					  // alert('查看');
                    }
				  }
                },
                '编辑'
			  )
            ])
          }
        }
      ],
      foodData: []
    }
  },
  methods: {
    // 获取历史记录信息
    handleListApproveHistory () {
      // 保存取到的所有数据
      this.ajaxHistoryData = testData.histories
      this.exportdata = testData.histories
      this.dataCount = testData.histories.length
      // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
      if (testData.histories.length < this.pageSize) {
        this.foodData = this.ajaxHistoryData
      } else {
        this.foodData = this.ajaxHistoryData.slice(0, this.pageSize)
      }
    },
    // 点击切换页面
    changepage (index) {
      // 需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
      let _start = (index - 1) * this.pageSize
      // 需要显示结束数据的index
      let _end = index * this.pageSize
      // 截取需要显示的数据
      this.foodData = this.ajaxHistoryData.slice(_start, _end)
      // 储存当前页
      this.pageCurrent = index
    },
    // 每页显示的数据条数
    nowPageSize (index) {
      let _start = (this.pageCurrent - 1) * index
      let _end = this.pageCurrent * index
      this.foodData = this.ajaxHistoryData.slice(_start, _end)
      // 实时获取当前需要显示的条数
      this.pageSize = index
    }
  },
  created () {
    this.handleListApproveHistory()
  }
}
</script>
 <style lang="less" scoped>

 </style>
